<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="../../javascript/plug-ins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/style.css" />
    <script src="../../javascript/jquery.js"></script>
    <script type="text/javascript" src="../../javascript/plug-ins/layui/layui.js"></script>
    <script src="../../js/zyrpublic.js?v=1.0"></script>
    <script src="../../js/zyrfunction.js?v=1.0"></script>
    <script src="js/CpikeList.js?v=1.3115"></script>
    <script src="../../javascript/vue.js"></script>
    <script src="../../javascript/elementui.js"></script>
    <script src="../../javascript/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
</head>

<body>
    <div class="page-wrap" id="app">
        <section class="page-hd t">
            <header style="display: flex; align-items: center">
                <div style="margin-right: 20px;cursor: pointer;" onclick="javascript:history.back(-1);">
                    返回上一页
                </div>
                <h5 class="title">
                    <a href="#" class="red">{{countDownText}}</a>
                </h5>
            </header>
            <hr />
        </section>
        <div style="margin-top: 20px">
            <div style="margin-bottom: 20px">
                <el-button type="primary" @click="coutVis = true">新增</el-button>
                <el-button plain @click="fnbatchDel">删除</el-button>
            </div>
            <el-table @selection-change="handleSelectionChange"
                :header-cell-style="{background:'#f7f4f8', color:'#000'}" :data="tableTimeList" tooltip-effect="dark"
                style="width: 100%">
                <el-table-column type="selection" width="55"> </el-table-column>
                <!-- <el-table-column label="序号" sortable width="120">
                    <template slot-scope="scope"> {{scope.$index+1}} </template>
                </el-table-column> -->
                <el-table-column type="index" width="80" label="序号">
                </el-table-column>
                <el-table-column label="日期" width="160" prop="date">
                </el-table-column>
                <el-table-column label="区间" prop="time"> </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <span @click.stop="fndelTime(scope.row)" style="color: #11947f; display: inline-block">
                            <i class="el-icon-edit"></i>删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChangeTwo" @current-change="handleCurrentChangeTwo"
                :current-page="pageNumTwo" :page-size="pageSizeTwo" layout="total, sizes, prev, pager, next"
                :total="talLengthTwo">
            </el-pagination>
        </div>
        <el-dialog title="新增倒计时" :visible.sync="coutVis" width="45%" :close-on-click-modal="false"
            @close="coutVis = false">
            <div>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="选择日期">
                        <el-date-picker v-model="activitydate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <!-- <el-form-item label="选择区间">
                        <el-time-picker is-range v-model="activitytime" :picker-options="{start:'00:00',end:'23:59',step:'00:30'}" value-format="HH:mm" format="HH:mm" range-separator="至" start-placeholder="开始时间"
                            end-placeholder="结束时间" placeholder="选择时间范围">
                        </el-time-picker>
                    </el-form-item> -->
                    <el-form-item label="起始时间">
                        <el-time-select placeholder="起始时间" v-model="startTime"
                            :picker-options="{start: '00:00',step: '00:30', end: '23:30'}"></el-time-select>
                        </el-time-select>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-time-select placeholder="结束时间" v-model="endTime"
                            :picker-options="{start: '00:00',step: '00:30', end: '23:30',minTime: startTime}">
                        </el-time-select>
                    </el-form-item>
                    <el-button type="primary" @click="submitCountDown">立即创建</el-button>
                        <el-button @click="coutVis = false">取消</el-button>
                </el-form>
            </div>
        </el-dialog>
    </div>
    <!---page-wrap------>
</body>

<script>
    function getQuery(name) {
        // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);

        if (r != null) {
            // 对参数值进行解码
            return decodeURIComponent(r[2]);
        }
        return null;
    }
    var coutdownId = getQuery("id");
    console.log(coutdownId);
    var instance = axios.create({
        baseURL: httpurl,
        timeout: 3000,
        headers: {
            "Content-Type": "application/json",
            Authorization: GetTokenInfo(),
        },
    });
</script>

<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                countDownText: "",
                tableTimeList: [],
                pageNumTwo: 1,
                pageSizeTwo: 10,
                talLengthTwo: 0,
                coutVis: false,
                dataVal: "",
                timer: "",
                activitydate: '',
                activitytime: [],
                form: {
                    startTime: "",
                    endTime: "",
                    type: coutdownId,
                },
                delList: [],
                finiteFavourable: '',
                startTime: '',
                endTime: ''
            };
        },

        mounted() {
            this.getTimeList();
            if (coutdownId == 1) {
                this.countDownText = "秒杀倒计时";
            } else if (coutdownId == 2) {
                this.countDownText = "拼单倒计时";
            }else{
                this.countDownText = "限时特惠倒计时";

            }
        },

        methods: {
            //获取时间列表
            getTimeList() {
                this.tableTimeList = [];
                instance
                    .get(
                        `queryDateTimeListPageByType?type=${coutdownId}&pageNo=${this.pageNumTwo}&pageSize=${this.pageSizeTwo}`
                    )
                    .then((res) => {
                        console.log(res);
                        if (res.data.rtnCode == 200) {
                            this.tableTimeList = res.data.data.dateList;

                            this.talLengthTwo = res.data.data.dateCount;
                        }
                    });
            },
            //
            submitCountDown() {
                // if (this.activitydate == "") {
                //     this.$message.info("日期不能为空");
                //     return
                // }
                // if (this.activitytime.length == 0) {
                //     this.$message.info("时间区间不能为空");
                //     return
                // }
                // this.form.startTime = this.activitydate + ' ' + this.activitytime[0]
                // this.form.endTime = this.activitydate + ' ' + this.activitytime[1]
                // console.log(this.form);
                if (this.activitydate == ""||this.startTime==''||this.endTime=="") {
                    this.$message.info("日期时间不能为空");
                    return
                }
                this.form.startTime = this.activitydate + ' ' + this.startTime
                this.form.endTime = this.activitydate + ' ' + this.endTime
                instance.post("insertDateTimeList", this.form).then((res) => {
                    if (res.data.rtnCode == 200) {
                        this.coutVis = false;
                        this.$message.success("新增时间成功");
                        this.getTimeList();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                });
            },
            // 单个删除数据
            async fndelTime(val) {
                console.log(val);
                let confirmResult = await this.$confirm(
                    "此操作将永久删除该数据, 是否继续?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                ).catch((err) => err);
                if (confirmResult !== "confirm") {
                    return this.$message.info("已取消删除！");
                }
                let res = await instance.post("deleteDateTimeList", {
                    type: coutdownId,
                    date: val.date,
                });
                if (res.data.rtnCode == 200) {
                    this.$message.success("删除时间成功");
                    this.getTimeList();
                } else {
                    this.$message.error("删除时间失败");
                }
            },
            //批量删除
            async fnbatchDel() {
                let confirmResult = await this.$confirm(
                    "此操作将永久删除该数据, 是否继续?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                ).catch((err) => err);
                if (confirmResult !== "confirm") {
                    return this.$message.info("已取消删除！");
                }
                let res = await instance.post('deleteDateTimeList', {
                    type: coutdownId,
                    conditionDateList: this.delList
                })
                if (res.data.rtnCode == 200) {
                    this.$message.success("删除时间成功");
                    this.getTimeList();
                } else {
                    this.$message.error("删除时间失败");
                }
            },
            //
            handleSelectionChange(val) {
                console.log(val);
                val.forEach(v => {
                    this.delList.push(v.date)
                })
            },
            //
            handleSizeChangeTwo(val) {
                this.pageSizeTwo = val;
                this.getTimeList();
            },
            //
            handleCurrentChangeTwo(val) {
                this.pageNumTwo = val;
                this.getTimeList();
            },
        },
    });
</script>

</html>